<template>
  <div>

    <div>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button @click="getDataMethod">查询</el-button>
      <el-button>
        <router-link to="/card">新增</router-link>
      </el-button>

    </div>


    <el-table
      :data="tableData"
      border
      style="width: 100%">

      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="decName"
        label="字段详情名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="decValue"
        label="字典详情值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="dicValue"
        label="字典值"
        width="180">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        prop="indexOrder"
        label="排序"
        width="180">
      </el-table-column>
      <el-table-column
        prop="icon"
        label="图标">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  export default {
    name: 'decList',
    data() {
      return {
        input: '',
        tableData: [],
      }
    },
    methods: {
      getDataMethod() {
        this.$fetch('/card/api/dec/pageQuery')
          .then((response) => {
            console.log(response)
            this.tableData = response.content;
          })
          .catch(response => {
            console.log(response)
          })
      },
      deleteRow(index, rows) {
        console.log(rows)
        var o = rows[index];
        console.log(o)
        var id = o.id;
        this.$del('/card/api/dec/' + id)
          .then((response) => {
            this.tableData.splice(index, 1)
          })
          .catch(response => {
            console.log(response)
          })
      },
      goToAddCard() {
      }

    },
    watch: {},
    created() {
      this.getDataMethod();
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
